@extends("layout.app")

@section("page-content")
    <div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8 max-w-2xl">
        <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Add New Event</h1>
        <form class="bg-white p-6 rounded-lg shadow-md space-y-6" method="post">
            @csrf
            <!-- Title -->
            <div>
                <label class="block text-gray-700 mb-2">Title *</label>
                <input required value="{{old('title')}}" name="title" type="text" placeholder="Event Title" class="w-full p-2 border rounded" >

                @foreach($errors->get("title") as $error)
                <p class="text-red-800">{{$error}}</p>
                @endforeach

            </div>

            <!-- Description -->
            <div>
                <label class="block text-gray-700 mb-2">Description</label>
                <textarea name="description" type="text" placeholder="Event Description" class="w-full p-2 border rounded" rows="3">{{old('description')}}</textarea>
            </div>

            <!-- Category -->
            <div>
                <label class="block text-gray-700 mb-2">Category *</label>
                <input value="{{old('category')}}" list="categories" name="category" placeholder="Select or type new category" class="w-full p-2 border rounded" required="">
                @foreach($errors->get("category") as $error)
                    <p class="text-red-800">{{$error}}</p>
                @endforeach
                <datalist id="categories">
                    <option value="Sports">
                    </option><option value="Music">
                    </option><option value="Tech">
                    </option><option value="Art">
                    </option><option value="Food">
                    </option></datalist>
            </div>

            <!-- Type -->
            <div>
                <label class="block text-gray-700 mb-2">Type *</label>
                <select name="type" class="w-full p-2 border rounded" required="">
                    <option value="PUBLIC" @if(old('type')==='PUBLIC') selected @endif>Public</option>
                    <option value="PRIVATE" @if(old('type')==='PRIVATE') selected @endif>Private</option>
                </select>
            </div>

            <!-- Location -->
            <div>
                <label class="block text-gray-700 mb-2">Location *</label>
                <input required value="{{old('location')}}" name="location" type="text" placeholder="Event Location" class="w-full p-2 border rounded">
                @foreach($errors->get("location") as $error)
                    <p class="text-red-800">{{$error}}</p>
                @endforeach
            </div>

            <!-- Capacity -->
            <div>
                <label class="block text-gray-700 mb-2">Capacity *</label>
                <input value="{{old('capacity')}}" name="capacity" type="number" min="1" placeholder="Max Participants" class="w-full p-2 border rounded" required="">
                @foreach($errors->get("capacity") as $error)
                    <p class="text-red-800">{{$error}}</p>
                @endforeach
            </div>

            <!-- Start Time -->
            <div>
                <label class="block text-gray-700 mb-2">Start Time *</label>
                <input required value="{{old('start_at')}}" name="start_at" type="datetime-local" class="w-full p-2 border rounded">
                @foreach($errors->get("start_at") as $error)
                    <p class="text-red-800">{{$error}}</p>
                @endforeach
            </div>

            <!-- End Time -->
            <div>
                <label class="block text-gray-700 mb-2">End Time *</label>
                <input required value="{{old('end_at')}}" name="end_at" type="datetime-local" class="w-full p-2 border rounded">
                @foreach($errors->get("end_at") as $error)
                    <p class="text-red-800">{{$error}}</p>
                @endforeach
            </div>

            <!-- Tags -->
            <div>
                <label class="block text-gray-700 mb-2">Tags (max 5)</label>
                <div id="selected-tags" class="flex flex-wrap gap-2 mb-2 min-h-[2rem]">
                    @if(session('tags'))
                        @foreach(session("tags") as $tag)
                            <span class="bg-gray-200 px-2 py-1 rounded flex items-center">{{$tag}} <span class="ml-2 text-red-500 cursor-pointer" onclick="this.parentElement.remove()">x</span></span>
                        @endforeach
                    @endif
                </div>
                <input id="tag-input" type="text" placeholder="Type a tag and press Enter" class="w-full p-2 border rounded" onkeydown="addTag(event)">
                <p id="tag-error" class="text-red-500 text-sm mt-1 hidden">Maximum 5 tags allowed</p>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-center">
                <button type="submit" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">Save</button>
            </div>
        </form>
    </div>
@endsection

@section("script")
    <script>
        function addTag(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                const input = event.target;
                const tag = input.value.trim();
                if (tag) {
                    const tagsDiv = document.getElementById('selected-tags');
                    const existingTags = Array.from(tagsDiv.children).map(span => span.textContent.replace('x', '').trim());
                    if (existingTags.length >= 5) {
                        document.getElementById('tag-error').classList.remove('hidden');
                        return;
                    }
                    if (!existingTags.includes(tag)) {
                        const tagSpan = document.createElement('span');
                        tagSpan.className = 'bg-gray-200 px-2 py-1 rounded flex items-center';
                        tagSpan.innerHTML = `${tag} <span class="ml-2 text-red-500 cursor-pointer" onclick="this.parentElement.remove(); document.getElementById('tag-error').classList.add('hidden')">x</span>`;
                        tagsDiv.appendChild(tagSpan);
                    }
                    input.value = '';
                    document.getElementById('tag-error').classList.add('hidden');
                }
            }
        }

        function getTags(){
            const tags_el = $("#selected-tags")
            const tags = Array.from(tags_el.children).map(tag=>tag.textContent.replace('x','').trim());
            console.log(tags)
            return tags
        }

        $("button[type='submit']").addEventListener("click",e=>{
            e.preventDefault()
            $$("input[name='tags[]']").forEach(input=>input.remove());
            const tags = getTags()
            tags.forEach(tag=>{
                const input = document.createElement("input")
                input.type = "hidden"
                input.name = "tags[]"
                input.value = tag
                $("form").appendChild(input)
            })
            $("form").submit()
        })
    </script>
@endsection

